<template>
    <div class="w-full h-full flex items-center justify-center">
        <div class="border space-y-5">
            <div class="text-2xl flex justify-center">
                登陆页面
            </div>
            <el-form label-width="100" style="width:400px;height: 100px;">
                <el-form-item label="用户名">
                    <el-input v-model="username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="password" placeholder="请输入密码"></el-input>
                </el-form-item>

            </el-form>
            <div class="flex w-full justify-around">
                <el-button type="primary" @click="Login">登陆</el-button>
                <el-button @click="Reset">重置</el-button>
                <el-button type="success" @click="showModal = true">注册</el-button>
            </div>
        </div>
    </div>
    <el-dialog v-model="showModal" class="w-2/3">
        <el-form label-width="100px">
            <el-form-item label="用户名">
                <el-input v-model="registerData.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="registerData.password" type="password">
                </el-input>
            </el-form-item>
            <el-form-item label="确认密码">
                <el-input v-model="registerData.confirmPassword" type="password">
                </el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="registerData.tel">
                </el-input>
            </el-form-item>
            <el-form-item label="注册类型">
                <el-select v-model="registerData.role">
                    <el-option value="user" label="用户">
                    </el-option>
                    <el-option value="landlord" label="房东">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div>
                <el-button type="primary" @click="add">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router'
import { api } from '../boot/axios'
import { addUser } from '../api/user'
import { useInfoStore } from '../stores/counter'
let username = ref('')
let password = ref('')
let showModal = ref(false)
let registerData = ref({
    username: '',
    password: '',
    confirmPassword: '',
    tel: '',
    role: ''
})
let add = () => {
    // 注册，判断两次密码是否一致
    if (registerData.value.password !== registerData.value.confirmPassword) {
        ElMessage.error("两次输入密码不一致")
        return
    }
    // 构造表单数据
    let formData = new FormData()
    formData.append('username', registerData.value.username)
    formData.append('password', registerData.value.password)
    formData.append('tel', registerData.value.tel)
    formData.append('role', registerData.value.role)
    // 调用注册接口
    addUser(formData).then(res => {
        if (res.data.code === 200) {
            ElMessage.success('注册成功')
        } else {
            ElMessage.error(res.data.msg)
        }
    })
}
const router = useRouter()
const infoStore = useInfoStore()
let Login = () => {
    // 登陆,构造表单数据
    let formdata = new FormData()
    formdata.append('username', username.value)
    formdata.append('password', password.value)
    // 调用登陆接口
    api({
        url: '/user/login',
        method: 'post',
        data: formdata
    }).then(res => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.msg)
            // 保存user 
            sessionStorage.setItem('info', JSON.stringify(res.data.data))
            // 保存用户信息
            infoStore.setInfo(res.data.data)
            let role = res.data.data.role
            // 根据角色跳转到不同的页面
            if (role == 'landlord') {
                router.push({ name: 'landlord' })
            }
            else if (role === 'admin') {
                router.push({ name: 'admin' })
            }
            else {
                router.push({ name: 'IndexLayoutView' })
            }
        } else {
            ElMessage.error(res.data.msg)
        }
    })
}
let Reset = () => {
    // 重置
    username.value = ''
    password.value = ''
}

</script>

<style scoped>
.border {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
}
</style>